/* eslint-disable @typescript-eslint/ban-ts-comment */
import { computed, defineComponent, PropType, ref, toRefs, watch } from 'vue';
import FormConnectorRuleSetting from '@src/component/form/components/FormConnector/FormConnectorRuleSetting';
import { ConnectorDialogDetailData } from '@src/modules/connector';
import { ComponentEmitAction } from '@src/component/form/components/FormConnector/components/FormConnectorDataRuleSetting/model/enum/action';



export interface ConnectorDialogDetailDataFilterData extends ConnectorDialogDetailData {
    fromApp: Record<string, any>
}
export default defineComponent({
  props: {
    configData: {
      type: Object as PropType<ConnectorDialogDetailDataFilterData>,
      default: ()=> ({})
    },
  },
  setup(props, { emit }) {
    const { configData } = toRefs(props) 
    const formConnectorRuleSettingRef = ref(null)
    const updateRuleSetting = (v: any) => {
      emit(ComponentEmitAction.Input, { field: null, newValue: v })
    }

    return ()=> (
      <div class="form-connector-setting__filter">
        <FormConnectorRuleSetting
        // @ts-ignore
          configData={configData.value}
          onRuleChange={updateRuleSetting}
          type="select"
          fromApp={configData.value?.fromApp}
          toApp={configData.value?.paasApp}
          ref={formConnectorRuleSettingRef}
        />
      </div>
    )
  }
})